<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
                padding:0;
                margin:0;
            }
        body{
             position: relative;
        }
            ul{
                width: 1000px;
                min-width:600px;
                margin: 0 auto;
                display:flex;
                justify-content:space-between;
                align-items:center;
                list-style: none;
            }
            
            .big{
                width: 300px;
                height: 300px;
                position: absolute;
                display: none;
            }
    </style>
    <script>
     window.onload=function(){
   var  imgs=document.querySelectorAll("li img");
   var  big=document.querySelector(".big");
         for (let i = 0; i < imgs.length; i++) {
             imgs[i].onmousemove=function(e){
                big.style.top=e.y+10+"px";
                big.style.left=e.x+10+"px";
                big.src=this.src;
             }
             imgs[i].onmouseout=function(){
                 big.style.display="none";
             }
             imgs[i].onmouseenter=function(){
                 big.style.display="block";
             }
            }
         }
    </script>
</head>
<body>
    <ul>
        <li><img src="./a/toplist_a01.jpg" alt=""></li>
        <li><img src="./a/toplist_a02.jpg" alt=""></li>
        <li><img src="./a/toplist_a03.jpg" alt=""></li>
        <li><img src="./a/toplist_a04.jpg" alt=""></li>
        <li><img src="./a/toplist_a05.jpg" alt=""></li>
        <li><img src="./a/toplist_a06.jpg" alt=""></li>
      
    </ul>
    <img class="big" src="./a/toplist_a01.jpg" alt="">
</body>
</html>